<template>
	<div class="foot">
		<van-tabbar v-model="active" active-color="#55BC9E" inactive-color="#000">
		  <van-tabbar-item name="home" icon="wap-home-o" @click="goto_home">首页</van-tabbar-item>
		 
		  <van-tabbar-item name="classification" icon="list-switching" @click="goto_classification">分类</van-tabbar-item>
		   
		  <van-tabbar-item name="cart" icon="shopping-cart-o" @click="goto_cart"> 购物车</van-tabbar-item>
		  <van-tabbar-item name="user" icon="user-o" @click="goto_my"> 我的</van-tabbar-item>
		</van-tabbar>
		
		                     
		                  
	</div>
	
</template>

<script>
	export default{
		name:'foot',
		data() {
			 return {
					 active: this.$route.name,
				 }
		},
		mounted(){
			this.active=this.$route.name
		},
		methods:{
			goto_home(){
				this.$router.push({
					name:'home'
				})
			},
			goto_classification(){
				this.$router.push({
					name:'classification'
				})
			},
			goto_cart(){
				this.$router.push({
					name:'cart'
				})
			},
			goto_my(){
				this.$router.push({
					name:'user'
				})
			},
		}
		
	}
</script>

<style lang="scss">
	.foot{
		width: 100%;
		height: 6%;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		
		
	}
</style>